<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- <h1>打个招呼</h1>
     使用子组件，同时传递title属性
    <introduce title="大家好，我是寿司"></introduce>-->
    <h2>课程：</h2>
    <!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性lessons -->
    <my-list :items="lessons"/>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 定义安全组件，两个参数：1：组件名称，2：组件参数
    /*Vue.component("introduce",{
        // 直接使用props接收到属性来渲染页面
        template:'<h3>{{ title }}</h3>',
        props:['title'] // 通过props来接收一个父组件传递属性
    })
    var app = new Vue({
        el:"#app"
    })*/
    const myList = {
        template:'\
            <ul>\
                <li v-for="item in items":key="item.id">{{item.id}}:{{item.name}}</li>\
            </ul>\
         ',
        props:{ // 通过props来接收父组件传递来的属性
            items:{ // 这里定义items属性
                type:Array, // 要求必须是Array类型
                default:[] // 如果父组件没有传，那么给定默认值为[]
            }
        }
    }
    var app = new Vue({
        el:"#app",
        components:{
            myList // 当key和value一样的时候，可以只写一个
        },
        data:{
            lessons:[
                {id:1,name:'Java'},
                {id:2,name:'Php'},
                {id:3,name:'IOS'},
            ]
        }
    })
</script>
</body>
</html>